<template>
    <el-container style="height: 100%;" id="simps">
        <el-header style="height: 20px;display:flex;flex-direction: row;justify-content:left;align-items: flex-start;">
            <el-dropdown trigger="click" v-for="(o,index) in dropArr" :key="index" style="margin-right: 20px" @command="handleCommand">
                <strong >{{o.menu}}</strong>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(oo,index) in o.item" :key="index" style="text-align: left;" :disabled="oo.disabled"
                                      :divided="oo.divided" :command="oo.componentName">
                        {{oo.description}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside style="height: 93%;width: 30px;border: 1px solid #eee;background-color: #f4f4f5">
                <el-tooltip v-for="(o,index) in asideArr" :key="index" :content="o.description" placement="right">
                    <el-button type="info" plain style="width: 90%;margin: 0;border: 0;padding: 3px 0 0;" @click="handleLeftSide(o.description, o.cursor)">
                        <img :src="o.path" style="width: 20px;height:20px;margin-top: 10px"/>
                    </el-button>
                </el-tooltip>
            </el-aside>
            <el-container style="z-index: 1">
                <el-header style="height: 41px;padding: 0;border: 1px solid #eee;display:flex;flex-direction: row">
                    <component id="tool" :is="currentTool"
                               v-on:clipper-end="handleClipper"
                               v-on:font-type="fontConfig.type=$event;"
                               v-on:font-size="fontConfig.size=$event;"
                               v-on:font-effect="fontConfig.effect=$event"
                               v-on:input-dialog="handleFontInput"
                               v-on:pencil="cancelPencil"
                    ></component>
                    <div style="width: auto;height: 30px;display: flex;flex-direction: row;float: right">
                        <el-button type="text" @click="handleScrollBtn(canvasConfig.initValue>0?canvasConfig.initValue-1:0)" style="margin:0;padding: 0;margin-top: 4px;margin-right: 5px">-</el-button>
                        <el-slider v-model="canvasConfig.initValue" style="width: 100px"></el-slider>
                        <el-button type="text" @click="handleScrollBtn(canvasConfig.initValue<=100?canvasConfig.initValue+1:100)" style="margin:0;padding: 0;margin-top: 4px;margin-left: 5px">+</el-button>
                        <el-button type="primary" plain @click="handleScrollBtn(50)" style="margin:0;padding: 0;margin-top: 4px;margin-left: 10px">适应屏幕</el-button>
                    </div>
                </el-header>
                <div style="background-color: darkgray;padding: 0;z-index: -1;display: flex;flex-direction: row;align-content: flex-start;justify-items: flex-start;width: 100%;height: 100%" id="main">
                    <div id="canvasContainer">
                        <canvas id="canvas" :width="canvasConfig.width" :height="canvasConfig.height" style="z-index: 1"></canvas>
                    </div>
                    <el-dialog :title="dialogConfig.title" :visible.sync=dialogConfig.visible :width="dialogConfig.width" append-to-body style="text-align: left">
                        <component :is="currentDialog" id="component"
                                   v-on:upload-img='handleUploadImg'
                                   v-on:text-input="handleInput($event)"
                                   v-on:filter="handleFilter($event)"
                                   v-on:close="handleClose"
                                   v-on:export="handleExport($event)"
                        ></component>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogConfig.visible=false" type="danger" plain>取消</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-container>
            <el-aside style="height: 93%;width: 300px;z-index: 100">
                <el-tabs :v-model="'3'" type="activeName" style="height: 230px;">
                    <el-tab-pane label="调色板">
                            <div style="display: flex;flex-direction: row;justify-items: left;margin-top: 30px">
                                <el-button plain style="width: 25%;border: 0">前景色</el-button>
                                <el-color-picker v-model="fore_color" show-alpha></el-color-picker>
                                <el-input v-model="fore_color" :placeholder="fore_color" style="width: 53%;margin-left: 10px"></el-input>
                            </div>
                            <div style="display: flex;flex-direction: row;justify-items: left;margin-top: 30px">
                                <el-button plain style="width: 25%;border: 0">背景色</el-button>
                                <el-color-picker v-model="back_color" show-alpha></el-color-picker>
                                <el-input v-model="back_color" :placeholder="back_color" style="width: 53%;margin-left: 10px"></el-input>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs :v-model="'2'" type="activeName"  style="height: 300px">
                    <el-tab-pane label="属性">
                        <div id="feature_sub">
                            <div></div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="调整">
                        <div id="feature_btn"></div>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs :v-model="'3'" type="activeName" style="height: 300px">
                    <el-tab-pane label="图层">
                        <div id="side_layer"></div>
                    </el-tab-pane>
                    <el-tab-pane label="通道">
                        <div id="side_tunnel"></div>
                    </el-tab-pane>
                    <el-tab-pane label="路径">
                        <div id="side_path"></div>
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
        </el-container>
    </el-container>
</template>

<script>

    import About from './dropmenu/simpleps/About'
    import Upload from './dropmenu/file/Upload'
    import Clipper from './lside/Clipper'
    import Font from './lside/Font'
    import FontInput from './lside/FontInput'
    import MyFilter from './dropmenu/filter/MyFilter'
    import Quit from './dropmenu/simpleps/Quit'
    import Help from './dropmenu/help/Help'
    import Export from './dropmenu/file/Export'
    import Pencil from './lside/Pencil'

    import {fabric} from 'fabric'

    export default {
        name: "SimPs",
        data(){
          return{
              fore_color:"rgba(0,0,0,1)",
              back_color:"rgba(0,0,0,0.1)",
              stroke_width:5,
              currentDialog:null,
              dialogConfig:{
                  title:"",
                  width:"60%",
                  visible:false,
              },
              canvasConfig:{
                  width:1200,
                  height:800,
                  action:"",
                  initValue: 50,
              },
              drawObjectList:[],
              drawObject:{
                  src:"",
                  title:"",
                  effect:[],
                  cor_x:0,
                  cor_y:0
              },
              canvas:null,
              currentStatus:'',
              id:0,
              clipperConfig:{
                 el:null,
                  object:'',
                  lastActive:"",
                  selection_object_left:'',
                  selection_object_top:'',
                  clippering:false,
              },
              currentTool:'',
              fontConfig:{
                  type:'',
                  size:20,
                  effect:'',
              },
              dropArr:[
                  {
                      menu:"Simple PS",
                      item:[
                          {description:"关于Simple PS",disabled:false,divided:false,func:null,componentName:"About"},
                          {description:"首选项",disabled:true,divided:true,func:null,componentName:""},
                          {description:"退出Simple PS",disabled:false,divided:true,func:null,componentName:"Quit"},
                      ]
                  },
                  {
                      menu:"文件",
                      item:[
                          {description:"新建",disabled:false,divided:false,func:null,componentName:"Upload"},
                          {description:"打开",disabled:false,divided:false,func:null,componentName:"Upload"},
                          {description:"关闭",disabled:false,divided:true,func:null,componentName:"Delete"},
                          {description:"关闭全部",disabled:false,divided:false,func:null,componentName:"DeleteAll"},
                          {description:"存储",disabled:false,divided:true,func:null,componentName:"Export"},
                          {description:"导出",disabled:false,divided:false,func:null,componentName:"Export"},
                          {description:"导入",disabled:false,divided:false,func:null,componentName:"Upload"},
                          {description:"共享",disabled:true,divided:true,func:null,componentName:""},
                          {description:"文件简介",disabled:true,divided:false,func:null,componentName:""},
                          {description:"打印",disabled:false,divided:true,func:null,componentName:"Export"},
                      ]
                  },
                  {
                      menu:"编辑",
                      item:[
                          {description:"还原",disabled:true,divided:false,func:null,componentName:""},
                          {description:"前进一步",disabled:true,divided:false,func:null,componentName:""},
                          {description:"后退一步",disabled:true,divided:false,func:null,componentName:""},
                          {description:"剪切",disabled:true,divided:true,func:null,componentName:""},
                          {description:"拷贝",disabled:true,divided:false,func:null,componentName:""},
                          {description:"粘贴",disabled:true,divided:false,func:null,componentName:""},
                          {description:"填充",disabled:true,divided:true,func:null,componentName:""},
                          {description:"描边",disabled:true,divided:false,func:null,componentName:""},
                          {description:"变形",disabled:true,divided:true,func:null,componentName:""},
                          {description:"变换",disabled:true,divided:false,func:null,componentName:""},
                          {description:"定义画笔",disabled:true,divided:true,func:null,componentName:""},
                          {description:"颜色设置",disabled:true,divided:false,func:null,componentName:""},
                          {description:"键盘快捷键",disabled:true,divided:true,func:null,componentName:""},
                          {description:"菜单",disabled:true,divided:true,func:null,componentName:""},
                      ]
                  },
                  {
                      menu:"图像",
                      item:[
                          {description:"模式",disabled:true,divided:false,func:null,componentName:""},
                          {description:"调整",disabled:true,divided:true,func:null,componentName:"Other"},
                          {description:"图像大小",disabled:true,divided:true,func:null,componentName:""},
                          {description:"画布大小",disabled:true,divided:false,func:null,componentName:""},
                          {description:"图像旋转",disabled:true,divided:true,func:null,componentName:""},
                          {description:"裁剪",disabled:true,divided:true,func:null,componentName:""},
                      ]
                  },
                  {
                      menu:"图层",
                      item:[
                          {description:"新建",disabled:false,divided:false,func:null,componentName:"Upload"},
                          {description:"复制图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"删除",disabled:false,divided:true,func:null,componentName:"Delete"},
                          {description:"快速导出为PNG",disabled:false,divided:true,func:null,componentName:"Export"},
                          {description:"导出为",disabled:false,divided:false,func:null,componentName:"Export"},
                          {description:"重命名图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"新建填充图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"新建调整图层",disabled:true,divided:false,func:null,componentName:""},
                          {description:"图层蒙版",disabled:true,divided:true,func:null,componentName:""},
                          {description:"栅格化",disabled:true,divided:true,func:null,componentName:""},
                          {description:"图层编组",disabled:true,divided:false,func:null,componentName:""},
                          {description:"取消图层编组",disabled:true,divided:false,func:null,componentName:""},
                          {description:"隐藏图层",disabled:true,divided:false,func:null,componentName:""},
                          {description:"排列",disabled:true,divided:true,func:null,componentName:""},
                          {description:"合并形状",disabled:true,divided:false,func:null,componentName:""},
                          {description:"锁定图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"合并图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"合并可见图层",disabled:true,divided:false,func:null,componentName:""},
                      ]
                  },
                  {
                      menu:"文字",
                      item:[
                          {description:"文字排列方向",disabled:true,divided:false,func:null,componentName:""},
                          {description:"栅格化文字图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"文字变形",disabled:true,divided:true,func:null,componentName:""},
                      ]
                  },
                  {
                      menu:"选择",
                      item:[
                          {description:"全部",disabled:false,divided:false,func:null,componentName:"SelectAll"},
                          {description:"取消选择",disabled:false,divided:true,func:null,componentName:"CancelSelect"},
                          {description:"重新选择",disabled:true,divided:false,func:null,componentName:""},
                          {description:"反选",disabled:true,divided:false,func:null,componentName:""},
                          {description:"所有图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"取消选择图层",disabled:true,divided:false,func:null,componentName:""},
                          {description:"查找图层",disabled:true,divided:true,func:null,componentName:""},
                          {description:"隔离图层",disabled:true,divided:true,func:null,componentName:""},
                      ]
                  },
                  {
                      menu:"滤镜",
                      item:[
                          {description:"打开滤镜对话框",disabled:false,divided:false,func:null,componentName:"MyFilter"},
                      ]
                  },
                  {
                      menu:"视图",
                      item:[
                          {description:"放大",disabled:false,divided:false,func:null,componentName:"ViewLarge"},
                          {description:"缩小",disabled:false,divided:false,func:null,componentName:"ViewSmall"},
                          {description:"按屏幕大小缩放",disabled:false,divided:true,func:null,componentName:"ViewNormal"},
                      ]
                  },
                  {
                      menu:"帮助",
                      item:[
                          {description:"Simple PS帮助",disabled:false,divided:false,func:null,componentName:"Help"},
                          {description:"系统信息",disabled:true,divided:true,func:null,componentName:""},
                          {description:"更新",disabled:true,divided:true,func:null,componentName:""},
                      ]
                  },
              ],
              asideArr:[
                  {
                      description:"移动工具",
                      path:require("../assets/leftside/移动.png"),
                  },
                  {
                      description:"矩形选择框工具",
                      path:require("../assets/leftside/矩形选择框.png"),
                  },
                  {
                      description:"魔棒工具",
                      path:require("../assets/leftside/魔棒.png"),
                  },
                  {
                      description:"图片裁剪工具",
                      path:require("../assets/leftside/图片裁剪.png"),
                  },
                  {
                      description:"吸管工具",
                      path:require("../assets/leftside/吸管.png"),
                  },
                  {
                      description:"画笔工具",
                      path:require("../assets/leftside/画笔.png"),
                  },
                  {
                      description:"印章工具",
                      path:require("../assets/leftside/印章.png"),
                  },
                  {
                      description:"橡皮擦工具",
                      path:require("../assets/leftside/橡皮擦.png"),
                  },
                  {
                      description:"模糊工具",
                      path:require("../assets/leftside/模糊.png"),
                  },
                  {
                      description:"放大镜工具",
                      path:require("../assets/leftside/放大镜.png"),
                  },
                  {
                      description:"钢笔工具",
                      path:require("../assets/leftside/钢笔.png"),
                  },
                  {
                      description:"文字工具",
                      path:require("../assets/leftside/文字.png"),
                  },
                  {
                      description:"选择工具",
                      path:require("../assets/leftside/选择.png"),
                  },
                  {
                      description:"矩形图形",
                      path:require("../assets/leftside/矩形.png"),
                  },
                  {
                      description:"拖放工具",
                      path:require("../assets/leftside/拖放.png"),
                  },
                  {
                      description:"编辑其它工具",
                      path:require("../assets/leftside/编辑其它.png"),
                  },
                  {
                      description:"颜色选择工具",
                      path:require("../assets/leftside/颜色选择.png"),
                  },
              ],
          }
        },
        components:{
            About,
            Upload,
            Clipper,
            Font,
            FontInput,
            MyFilter,
            Quit,
            Help,
            Export,
            Pencil,
        },
        methods: {
            handleCommand(cmd){
                if (cmd=='MyFilter'){
                    if (this.canvas.getActiveObject()==null){
                        this.$notify({
                            title:"警告️",
                            message:"你需要先选中图片才能添加滤镜。",
                            type:"warning",
                            }
                        )
                        return;
                    }
                }
                if (cmd=='Delete'){
                    this.canvas.remove(this.canvas.getActiveObject())
                    this.canvas.discardActiveObject().renderAll()
                    return;
                }
                if (cmd=='DeleteAll'){
                    this.canvas.getObjects().forEach((obj)=>{
                        this.canvas.remove(obj)
                    });
                    this.canvas.discardActiveObject().renderAll()
                    return;
                }
                if (cmd=='CancelSelect'){
                    this.canvas.discardActiveObject().renderAll()
                    return;
                }
                if (cmd=='SelectAll'){
                    this.canvas.discardActiveObject().renderAll()
                    this.canvas.getObjects().forEach((obj)=>{
                        obj.set({active:true})
                        this.canvas.setActiveObject(obj)
                    });
                    this.canvas.renderAll()
                    return;
                }
                if (cmd=='ViewLarge'){
                    this.handleScrollBtn(this.canvasConfig.initValue+1)
                    return;
                }
                if (cmd=='ViewSmall'){
                    this.handleScrollBtn(this.canvasConfig.initValue-1)
                    return;
                }
                if (cmd=='ViewNormal'){
                    this.handleScrollBtn(50)
                    return;
                }
                if(this.currentDialog!==cmd)
                    this.currentDialog=cmd;
                this.dialogConfig.visible=true
            },
            handleLeftSide:function(description, path){
                this.currentStatus = description;
                this.canvasConfig.action = description;
                document.getElementById("canvas").style.cursor = 'url('+path+'),auto';

                var that = this;

                //deal with different functions
                switch (description) {
                    case '图片裁剪工具':
                        var curObj = that.canvas.getActiveObject();
                        if (curObj==null){
                            that.$notify({
                                title:"警告️",
                                message:"你需要先选中图片才能开始裁剪。",
                                type:"warning",
                            })
                        }else{
                            /*copy from http://jsfiddle.net/86bTc/4/*/
                            that.canvas.remove(that.clipperConfig.el);
                            if (that.canvas.getActiveObject()) {
                                that.clipperConfig.object = that.canvas.getActiveObject();
                                that.clipperConfig.el = new fabric.Rect({
                                    fill: 'rgba(0,0,0,0.3)',
                                    originX: 'left',
                                    originY: 'top',
                                    stroke: '#ccc',
                                    strokeDashArray: [2, 2],
                                    opacity: 1,
                                    width: 1,
                                    height: 1,
                                    borderColor: '#36fd00',
                                    cornerColor: 'green',
                                    hasRotatingPoint: false
                                });
                                that.clipperConfig.el.left = that.canvas.getActiveObject().left;
                                that.clipperConfig.selection_object_left = that.canvas.getActiveObject().left;
                                that.clipperConfig.selection_object_top = that.canvas.getActiveObject().top;
                                that.clipperConfig.el.top = that.canvas.getActiveObject().top;
                                that.clipperConfig.el.width = that.canvas.getActiveObject().width * that.canvas.getActiveObject().scaleX;
                                that.clipperConfig.el.height = that.canvas.getActiveObject().height * that.canvas.getActiveObject().scaleY;
                                that.canvas.add(that.clipperConfig.el);
                                that.canvas.setActiveObject(that.clipperConfig.el)
                                for (var i = 0; i < that.canvas.getObjects().length; i++) {
                                    that.canvas.item(i).selectable = false;
                                }

                            }
                            that.clipperConfig.clippering=true
                            that.currentTool=Clipper
                        }
                        break;
                    case "文字工具":
                        that.currentTool=Font
                        break
                    case '画笔工具':
                        that.$notify.info({
                            title:"温馨提示",
                            message:"请在选择画笔前先选择颜色，画画完毕请记得手动退出画笔模式",
                        })
                        that.currentTool=Pencil
                        var draw = that.canvas.freeDrawingBrush
                        draw.color = that.fore_color
                        that.canvas.set({
                            isDrawingMode:true,
                            freeDrawingBrush:draw
                        })
                        break;
                    default:
                        break;
                }
            },
            handleUploadImg:function (event) {
                var cvs = this.canvas;
                fabric.Image.fromURL(event,function(oImg) {
                    oImg.scale(0.5);
                    cvs.add(oImg);
                })
            },
            handleScroll:function (cor, zoom) {
                this.canvas.zoomToPoint(cor, zoom);
                let newValue = 0;
                if (zoom<1){
                    newValue = zoom*50
                } else{
                    newValue = 50+(zoom-1)*5
                }
                this.canvasConfig.initValue = newValue>0?newValue<100?newValue:100:0
            },
            handleScrollBtn:function (newValue) {//init_value
                let re = 0;
                if (newValue<50){
                    re = newValue/50
                } else{
                    re = (newValue-50)/5+1
                }
                this.handleScroll({x:200,y:200},re)
            },
            handleClipper:function () {
                if (this.clipperConfig.clippering){
                    // alert('clippering')
                    var eLeft = this.clipperConfig.el.get('left');
                    var eTop = this.clipperConfig.el.get('top');
                    var left = eLeft - this.clipperConfig.object.left;
                    var top = eTop - this.clipperConfig.object.top;

                    left *= 1;
                    top *= 1;

                    var eWidth = this.clipperConfig.el.get('width');
                    var eHeight = this.clipperConfig.el.get('height');
                    var eScaleX = this.clipperConfig.el.get('scaleX');
                    var eScaleY = this.clipperConfig.el.get('scaleY');
                    var width = eWidth * 1;
                    var height = eHeight * 1;
                    this.clipperConfig.object.clipTo = function (ctx) {
                        ctx.rect(-(eWidth / 2)-200+left, -(eHeight / 2)-100+top, parseInt(width * eScaleX*2), parseInt(eScaleY * height*2));
                    }
                    for (var i = 0; i < this.canvas.getObjects().length; i++) {
                        this.canvas.item(i).selectable = true;
                    }
                    this.canvas.remove(this.clipperConfig.el);
                    this.clipperConfig.lastActive = this.clipperConfig.object;
                    this.canvas.renderAll();

                    this.clipperConfig.clippering=false
                    this.currentTool=null
                }
            },
            handleInput:function (input) {
                var text = new fabric.Text(input,{
                    top:200,
                    left:200,
                    fontSize:parseInt(this.fontConfig.size),
                    fontFamily:this.fontConfig.type,
                    height:this.fontConfig.size,
                    width:input.length*this.fontConfig.size,
                    fontWeight:'normal',
                    stroke:this.fore_color,
                    textBackgroundColor:this.back_color,
                })
                if (this.fontConfig.effect=='i'){
                    text.set({fontStyle:'italic'})
                }
                if(this.fontConfig.effect=='b'){
                    text.set({fontWeight:'bold'})
                }
                this.canvas.add(text)
                this.dialogConfig.visible=false
            },
            handleFontInput:function () {
                this.currentDialog=FontInput;
                this.dialogConfig.title='插入文字';
                this.dialogConfig.visible=true
            },
            fucking:function(ev){
                alert(ev)
            },
            handleFilter:function (ev) {
                var f = fabric.Image.filters
                var imgFilters = this.canvas.getActiveObject().filters
                if (ev.revertChecked){
                    imgFilters.push(new f.Invert())
                }
                if (ev.grayChecked){
                    imgFilters.push(new f.Grayscale())
                }
                for (var desc in ev.colorSelectArr){
                    // alert(ev.colorSelectArr[desc])
                    switch(ev.colorSelectArr[desc]){
                        case "Sepia":imgFilters.push(new f.Sepia());break;
                        case 'Black/White':imgFilters.push(new f.BlackWhite());break;
                        case 'Brownie':imgFilters.push(new f.Brownie());break;
                        case 'Vintage':imgFilters.push(new f.Vintage());break;
                        case 'Kodachrome':imgFilters.push(new f.Kodachrome());break;
                        case 'Technicolor':imgFilters.push(new f.Technicolor());break;
                        case 'Polaroid':imgFilters.push(new f.Polaroid());break;
                    }
                }
                // var gammaArr = []
                // gammaArr[0]=parseFloat(ev.value2_1)/100
                // gammaArr[1]=parseFloat(ev.value2_2)/100
                // gammaArr[2]=parseFloat(ev.value2_3)/100
                // this.applyFilter(17,new f.Gamma({gamma:gammaArr}))

                var brightnessFilter =  new f.Brightness({brightness:parseFloat(ev.value1-50)/50})
                var blurFilter = new f.Blur({blur:parseFloat(ev.value5)/100})
                var noiseFilter = new f.Noise({noise:parseFloat(ev.value4)/100})
                var contrastFilter = new f.Contrast({contrast:parseFloat(ev.value3)/100})
                imgFilters.push(brightnessFilter,blurFilter,noiseFilter,contrastFilter)
                this.canvas.getActiveObject().applyFilters()
                this.canvas.renderAll()
                this.dialogConfig.visible=false
            },
            handleClose:function () {
                window.close()
            },
            handleExport:function (ev) {
                var dataURI = this.canvas.toDataURL({
                    format:ev
                })
                var link = document.createElement("a");
                link.download = name;
                link.href = dataURI;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                //delete link;
                // var binStr = atob(dataURI.split(',')[1]),
                //     len = binStr.length,
                //     arr = new Uint8Array(len);
                //
                // for (var i = 0; i < len; i++) {
                //     arr[i] = binStr.charCodeAt(i);
                // }
                // var a = document.createElement('a');
                // a.download = '新画布';
                // a.innerHTML = 'download';
                // // the string representation of the object URL will be small enough to workaround the browser's limitations
                // a.href = URL.createObjectURL(new Blob([arr]));
                // // you must revoke the object URL,
                // //   but since we can't know when the download occured, we have to attach it on the click handler..
                // requestAnimationFrame(function() {
                //     URL.revokeObjectURL(a.href);
                // });
                // a.removeAttribute('href')
                this.dialogConfig.visible=false
            },
            cancelPencil:function () {
                this.$notify({
                    title:"成功️",
                    message:"你已经成功退出画笔模式",
                    type:"success",
                })
                this.canvas.set({
                    isDrawingMode: false
                })
                this.currentTool=''
            }
        },
        mounted(){
            window.onmousewheel = this.handleScroll;
            window.onkeyup = function (ev) {
                if (ev.keyCode==46 || ev.keyCode==8){//delete or backspace
                    canvas.getActiveObjects().forEach((obj)=>{
                        canvas.remove(obj)
                    });
                    canvas.discardActiveObject().renderAll()
                }
            };
            var canvas = new fabric.Canvas('canvas',{
                backgroundColor:'#dbdbdb',
                selectable:true,
            });
            this.canvas=canvas;

            var that = this;

            canvas.on('mouse:down',function (options) {
                switch (that.currentStatus) {
                    case '矩形图形':
                        if (options.target!==null)
                            break;
                        this.add(new fabric.Rect({
                            id:that.id,
                            stroke:that.fore_color,
                            fill:that.back_color,
                            strokeWidth: that.stroke_width,
                            top:options.e.clientY-50-this.getZoom(),
                            left:options.e.clientX-50-this.getZoom(),
                            width:30,
                            height:30,
                            }
                        ));
                        canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
                        that.id++;
                        break;
                    case '图片裁剪工具':
                        // if (that.clipperConfig.clippering){
                        //     that.clipperConfig.clipperStartX=options.e.clientX;
                        //     that.clipperConfig.clipperStartY=options.e.clientY
                        // }
                        break;
                    case '文字工具':

                        break
                    default:
                        //alert("网络中断！")
                }
            });
            canvas.on('mouse:wheel', function(opt) {
                var delta = opt.e.deltaY;
                var zoom = canvas.getZoom();
                zoom = zoom + delta/1000;
                if (zoom > 10) zoom = 10;
                if (zoom < 0.1) zoom = 0.1;
                that.handleScroll({ x: opt.e.offsetX, y: opt.e.offsetY },zoom);
                opt.e.preventDefault();
                opt.e.stopPropagation();
            });
            canvas.on('mouse:up',function () {
                switch (that.currentStatus) {
                    case "裁剪工具":
                        break;
                    default:
                        break;
                }
            });
        }
    }
</script>

<style scoped>
</style>
